<template>
    <view class="index">

        <view class="box">

            <nut-cell>
                <view class="Contact">
                    <view class="Information">
                        <p class="Account">基本信息</p>
                        <p class="value">联系方式</p>
                        <nut-input v-model="form.phone" placeholder="请填写联系方式" :adjust-position="true" type="digit"/>
                        <nut-divider class="line" />
                        <p class="choose">所在区域</p>
                        <view class="region">
                       <nut-cell  @click="() => { show = true }" :title="cityName? cityName: '请选择地址'"></nut-cell>
                       <nut-icon  name="right"></nut-icon>
                    </view> 
                        <nut-divider class="line" />
                        <p>工作年限</p>
                        <nut-input placeholder="拍摄工作年限 如：3年拍摄经验" v-model.number="form.working_hours" type="digit" :adjust-position="true"/>
                        <nut-divider class="line" />
                        <p>常用设备</p>
                        <nut-input v-model="form.equipment" placeholder="手机，相机，航拍" :adjust-position="true"/>
                    </view>
                </view>
            </nut-cell>

              <nut-cell>
                <view class="Information">
                    <view class="Account">擅长领域（最多选3个）</view>
                    <view class="categoryRow">
                        <view 
                            @click="checkedhandle(item)"
                            :class="['category','fcenter',form.good_at.some(name => name === item.name) ? 'Selected' : 'label']" 
                            v-for="item in type" :key="item.id" 
                        >{{ item.name }}</view>
                    </view>
                </view>
            </nut-cell>


            <nut-cell>
                <view class="tip">
                    <p class="Warm">温馨提示</p>
                    <p class="title">请慎重选择所在城市，选择后不可更改，且仅能参与该城市任务。</p>
                </view>
            </nut-cell>

            <view class="attestation">
                <nut-button type="primary" class="fetch" @click="goToSub">提交认证</nut-button>
            </view>
        </view>

        <!-- 城市选择弹窗 -->
        <nut-cascader
            title="城市选择"
            v-model:visible="show"
            v-model="cityCode"
            @change="areaChange"
            :options="config.oemArea"
            text-key="name"
            value-key="id"
            :safe-area-inset-bottom="true"
            class="popup-bottom"
        ></nut-cascader>

    </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useUserStore,useConfigStore } from '@/stores'
import { showToast } from '@tarojs/taro'
import { redirectTo, switchTab, back } from '@/router'
import { getTag, starInfoSubmit } from "@/api/index";
import "./index.scss"


const user = useUserStore()
const config = useConfigStore()
const type = ref([])
const cityName = ref('')
const cityCode =ref([0,0,0])
const form = reactive({
    phone: '',
    working_hours: '',
    equipment: '',
    area_code:'',
    good_at : [],
});


const checkedhandle = (item) => {
    const {id,name} =item
    const index = form.good_at.indexOf(name)
    if (index > -1) {
        // 删除
        form.good_at.splice(index, 1)
    } else if(form.good_at.length === 3){
        showToast({
            title: '最多只能选三个',
            icon: 'error'
        })
    }else {
        // 添加
        form.good_at.push(name)
    }
}

getTag({type:2}).then((res) => {
    type.value = res.data
})

const goToSub = () => {
    if (form.phone.length === 0) {
        showToast({
            title: '请输入手机号',
            icon: 'error'
        })
        return; 
    }

    if(!(/^1[3456789]\d{9}$/.test(form.phone))){ 
        showToast({
            title: '手机号有误',
            icon: 'error'
        }) 
        return; 
    } 
    if (!form.working_hours) {
        showToast({
            title: '请输入年限',
            icon: 'error'
        })
        return; 
    }
 
    if (!form.equipment) {
        showToast({
            title: '请输入设备',
            icon: 'error'
        })
        return; 
    }

    if(form.good_at.length < 1){
        showToast({
            title: '最少选一个类别',
            icon: 'error'
        })
        return; 
    }
    
       

    starInfoSubmit({ id: user.info.id, ...form }).then((res) => {
        const url = user.beforeAuthUrl ? user.beforeAuthUrl : '/pages/home/index'
        const path = url.split("?")[0]
        showToast({
            title: '提交成功',
            icon: 'success',
            duration: 2000
        })
        setTimeout(()=>{
            if(['/pages/home/index','/pages/ucenter/index','/pages/task/index'].indexOf(path)>-1){
                switchTab({ url })
            }else if(path==='/pagesub/stay/index'){
                back()
            } else {
                redirectTo({ url })
            }
        }, 2000)
    });
}

const show = ref(false);
// const desc = ref('请选择');
/*const confirm = ({ selectedValue, selectedOptions }) => {
    desc.value = selectedValue.join(',');
}
const change = ({ selectedValue, selectedOptions }) => {
    console.log(selectedValue);
};*/
function areaChange(value, node){
    cityName.value = node[2].text // 显示的地区中文名字
    cityCode.value = value  // 组件需要的数据  [40012,40013,40015]
    form.area_code = value[2] // 提交需要的数据  40012
}

// useDidShow(() => console.log('onShow'))
// useLoad((option) => {
//     console.log(33333, option)
// })

// function pathChange(...args){
//     console.log('pathChange', ...args);
//         }

</script>
